/**
 * @flow
 */

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    Image,
    Dimensions,
    Switch
} from 'react-native';

export default class MineMiddleView extends Component {
    render() {
        return (
            <View style={styles.container}>
                <InnerView bottomText='待付款' img='order1'/>
                <InnerView bottomText='待使用' img='order2'/>
                <InnerView bottomText='待评价' img='order3'/>
                <InnerView bottomText='退款/售后' img='order4'/>
            </View>
        );
    }
}

class InnerView extends Component{
    render(){
        let imgUri = {};
        switch (this.props.img){
            case 'order1':
                imgUri = require('../image/order1.png');
                break;
            case 'order2':
                imgUri = require('../image/order2.png');
                break;
            case 'order3':
                imgUri = require('../image/order3.png');
                break;
            case 'order4':
                imgUri = require('../image/order4.png');
                break;
        }
        return (
            <TouchableOpacity>
                <View style={{alignItems:'center'}}>
                    <Image source={imgUri} style={{width:30,height:20}}></Image>
                    <Text>{this.props.bottomText}</Text>
                </View>
            </TouchableOpacity>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        height:60,
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'space-around',
        backgroundColor:'white'
    }
});
